<template>
  <div class="picturePreview">
    <div class="pictureheader bg_style border_style ">
      <div class="search-all" :class="{ 'searchset':searchHflag}">
        <photo-search ref="photoDom" @setRotate="setRotate"></photo-search>
        <YsButton type="primary" class="searchBtn" @click="getSearchFile(true)">查询</YsButton>
      </div>
    </div>
    <div class="picturebox bg_style border_style " :class="{ 'pictureFooter':searchHflag}">
      <div class="service">
        <template v-if="page.data.length>0">
          <YsCard class="service-item bg_style border_style" v-for="(card,index) in page.data" :key="index">
            <div class="img-top">
              <img class="service-img" :src="imgurl(card.file_url)" :onerror="onErrorImg()">
              <div class="img-text">
                <p>{{card.file_name}}</p>
                <span class="icon iconfont icon-yiji grade" v-if="card.flaw_level == 1"></span>
                <span class="icon iconfont icon-erji grade" v-if="card.flaw_level == 2"></span>
                <span class="icon iconfont icon-sanji grade" v-if="card.flaw_level == 3"></span>
                <span class="icon iconfont icon-siji grade" v-if="card.flaw_level == 4"></span>
              </div>
            </div>
            <div class="service-list">
              <YsRow>
                <YsCol span="12">
                  <Select style="width:130px;margin-right:16px" class="select-border select-h36" placeholder="模板"
                    v-model="card.template_id">
                    <Option v-for="(item, index) in card.templateBeans" :value="item.id" :key="index"
                      :label="item.tp_name"> </Option>
                  </Select>
                </YsCol>
                <YsCol span="12" class="makebtn">
                  <YsButton @click="getTemplateFn(card,index)" type="primary">查看报告</YsButton>
                </YsCol>
              </YsRow>
              <YsRow class="make-mt8" style="margin-top:12px;">
                <YsCol span="24" style=" display: block">
                  <label class="make-title text_01">设备类型</label>
                  <p class="text_01 text_18" style="margin-top:4px;font-weight: 500;">{{card.part_name||'--'}}</p>
                </YsCol>
              </YsRow>
              <YsRow class="make-row">
                <YsCol span="8">
                  <label class="make-title text_01">任务编号</label>
                  <p class="text_01 text_18" style="margin-top:3px">{{card.dl_bucket_name||'--'}}</p>
                </YsCol>
                <YsCol span="8">
                  <label class="make-title text_01">材质</label>
                  <p class="text_01 text_18" style="margin-top:3px">{{card.mat_name||'--'}}</p>
                </YsCol>
                <YsCol span="8">
                  <label class="make-title make-label text_01">母材公称厚度/壁厚</label>
                  <p class="text_01 text_18" style="margin-top:3px">{{card.material_thick||'--'}}mm</p>
                </YsCol>
              </YsRow>

              <YsRow class="make-mt8">
                <YsCol span="24">
                  <label class="make-title text_01">底片标识</label>
                  <span class="text_01" v-html="setIcon(card.label_no)"></span>
                </YsCol>
              </YsRow>

              <YsRow class="make-mt8">
                <YsCol span="24">
                  <label class="make-title text_01">焊缝编号</label>
                  <span class="text_01">{{card.weld_no||'--'}}</span>
                </YsCol>
              </YsRow>

              <YsRow class="make-mt8">
                <YsCol span="24">
                  <label class="make-title text_01">焊缝位号</label>
                  <span class="text_01">{{card.weld_position||'--'}}</span>
                </YsCol>
              </YsRow>

              <YsRow class="make-mt8">
                <YsCol span="24">
                  <label class="make-title text_01">缺陷类型</label>
                  <span class="text_01">{{card.flaw_types||'--'}}</span>
                </YsCol>
              </YsRow>

              <YsRow class="make-mt8">
                <YsCol span="24">
                  <label class="make-title text_01">透照日期</label>
                  <span class="text_01">{{card.taking_pic_date||'--'}}</span>
                </YsCol>
              </YsRow>

              <YsRow class="make-mt8">
                <YsCol span="24">
                  <label class="make-title text_01">复拍件</label>
                  <span class="text_01">{{card.pat_date||'--'}}</span>
                </YsCol>
              </YsRow>
            </div>
          </YsCard>
        </template>
        <div v-else class="default-box">
          <img class="default-img" src="../../assets/images/default2.png" alt="">
          <p> 暂无数据</p>
        </div>
      </div>

      <div class="pictureiFooter page">
        <div class="records text_01">
          共{{ page.total }}条
        </div>
        <YsPage @on-change="onClickPage" :page-size="page.limit_recd" :current="page.start_recd" :total="page.total"
          class="pagePallion"></YsPage>
      </div>
    </div>
  </div>
</template>
<script>

import { mapActions } from "vuex";
import PhotoSearch from "_c/common/SearchSelector/PhotoSearch.vue";
export default {
  name: 'photoQuery',
  components: {
    PhotoSearch
  },
  data() {
    return {
      searchHflag: false,
      templateInfos: [],
      partInfos: [],
      page: {
        data: [],
        start_recd: 1, //开始数据
        limit_recd: 3, //查询的条数
        total: 0,
      },
    }
  },

  mounted() {
    this.getSearchFile()
  },
  methods: {
    ...mapActions(['getPageSearchFile', "getFileLastUseTempListAPI", "getviewFileReportDataAIP"]),
    //获取模板
    getTemplateFn(card, index) {
      if (!this.page.data[index].template_id) return this.$YsMessage.info('请选择模板');
      this.$store.commit('setSearchBeanVal', this.$refs.photoDom.searchBean)
      this.$router.push({ name: 'reportPreview', query: { template_id: this.page.data[index].template_id, file_id: this.page.data[index].id } });
    },
    //获取模板列表
    getTempList() {
      this.page.data.map((v, index) => {
        this.getFileLastUseTempListAPI({ file_id: v.id }).then(res => {
          let { data, msg, scode, status } = res;
          if (status === "ok") {
            let val = data.templateBeans.find(item => item.is_use)
            if (val) {
              this.page.data[index].template_id = val.id
            }
            this.page.data[index].templateBeans = data.templateBeans
          } else {
            this.page.data[index].templateBeans = this.$options.data().templateBeans
          }
        })
      })
    },
    onErrorImg() {
      return ("this.οnerrοr=null;this.src=" + '"' + require("../../assets/images/default-04.png") + '";');
    },
    //获取路径
    imgurl(path) {
      if (path) {
        return `${window.GlobalConfig.serviceProxy.BaseUrl}` + path
      } else {
        return require('../../assets/images/default.png')
      }
    },
    //设置选中
    setRotate(item) {
      this.searchHflag = item
    },
    //分页
    onClickPage(pageNum) {
      this.page.start_recd = pageNum;
      this.getSearchFile();
    },
    //获取接口数据
    getSearchFile(flag) {
      //搜索时候分页只能是1
      if (flag) {
        this.page.start_recd = 1;
      }
      let searchBean = this.$refs.photoDom.searchBean;
      this.getPageSearchFile({ searchBean, ...this.page }).then(res => {
        if (res.data.searchFileBeans && res.data.searchFileBeans.length > 0) {
          this.page.data = res.data.searchFileBeans.map(v => { return { ...v, template_id: "", templateBeans: [] } })
          this.getTempList()
          this.page.total = res.data.all_recd;
        } else {
          this.page = this.$options.data().page
        }
      })
    },
    //设置名字
    getPartName(item) {
      let { ep_name } = this.partInfos.find(v => v.id === item)
      return ep_name
    },
    //替换箭头
    setIcon(val) {
      if (val) {
        let characteristic = val.replace(/jt|cl/g, function ($0, $1) {
          if ($0 == 'jt') {
            return " <span  class='icon iconfont icon-xiangshangjiantou'></span> "
          } else if ($0 == 'cl') {
            return " <span  class='icon iconfont  icon-shizijiantou'></span> "
          }
        })
        return characteristic
      } else {
        return '--'
      }
    },
  },
  beforeRouteLeave(to, from, next) {
    if (to.path !== "/reportPreview") {
      this.$store.commit('setSearchBeanVal', this.$refs.photoDom.$options.data().searchBean)
    }
    next()
  }
}
</script>

<style scoped lang='less'>
.picturePreview {
  height: 100%;
  overflow: hidden;

  .pictureheader {
    margin-bottom: 8px;
    border-radius: 4px;
    border: 1px solid rgba(207, 215, 229, 0.6);

    .search-all {
      height: 72px;
      overflow: hidden;
      display: flex;
      padding: 16px;

      .searchBtn {
        width: 80px;
        min-width: 80px;
        height: 40px;
        font-family: PingFang SC;
        margin-left: auto;
      }
    }

    .searchset {
      height: auto !important;
    }
  }

  .pictureFooter {
    height: calc(100% - 150px) !important;
  }

  .picturebox {
    border: 1px solid rgba(207, 215, 229, 0.6);
    border-radius: 4px;
    height: calc(100% - 102px);
    overflow: auto;

    .service {
      height: calc(100% - 60px);
      overflow: auto;
      width: 100%;
      padding: 16px;
      border-radius: 4px;

      .service-item {
        position: relative;
        float: left;
        overflow: hidden;
        width: calc(calc(100% / 3) - 11px);
        // height: 100%;
        margin-right: 16px;
        border: 1px solid #cfd7e5;
        box-shadow: none;

        .makebtn {
          text-align: right;

          button {
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            min-width: 80px !important;
            width: 80px;
            padding: 0;
          }
        }

        /deep/ .ivu-card-body {
          padding: 0;
        }

        &:nth-of-type(3n) {
          margin-right: 0;
        }

        .check-box {
          position: absolute;
          right: 0;
          margin: 0;
        }

        .upper {
          background: #0091ff;
        }

        .unUpper {
          background: #e77930;
        }

        .wait {
          background: blue;
        }

        .setting {
          position: absolute;
          bottom: 14px;
          right: 10px;
          color: #405680;
          opacity: 0.6;
          cursor: pointer;
        }

        .popTip {
          display: flex;
          align-items: center;

          .tipButton {
            display: block;
            margin-left: auto;
          }
        }

        .service-footer {
          width: 100%;
          height: 53px;
          background: #f5f7fa;
          opacity: 1;
          position: absolute;
          bottom: -53px;
          left: 0;
          border-radius: 0px 0px 4px 4px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 24px;
          padding: 0 16px;
          transition: all 0.4s;

          i {
            cursor: pointer;
            color: #405680;
          }
        }

        &:hover .service-footer {
          bottom: 0px;
        }

        &:first-child {
          margin-left: 0;
        }

        &:nth-child(6) {
          margin-left: 0;
        }

        .img-top {
          height: 330px;
          position: relative;
          overflow: hidden;

          .service-img {
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: all 1.5s;
            display: block;
          }

          .img-text {
            height: 80px;
            width: 100%;
            position: absolute;
            bottom: 0;
            z-index: 100;
            background: rgba(0, 0, 0, 0.5);

            p {
              color: #fff;
              width: 80%;
              font-size: 20px;
              margin-top: 6px;
              margin-left: 16px;
              word-wrap: break-word;
              word-break: normal;
              overflow: hidden;
            }

            .grade {
              position: absolute;
              right: 16px;
              bottom: 0;
              font-size: 54px;
              z-index: 99;
              // color: red;
            }

            .icon-yiji {
              color: #13b38f;
            }

            .icon-erji {
              color: #0091ff;
            }

            .icon-sanji {
              color: #e77930;
            }

            .icon-siji {
              color: #d53939;
            }
          }
        }
      }

      .service-list {
        padding: 16px 16px 10px 16px;

        .make-mt8 {
          margin-top: 8px;

          .ivu-col {
            display: flex;
          }
        }

        .make-row {
          margin-top: 8px;

          .ivu-col {
            //  height: 30px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          p {
            font-size: 16px;
          }
        }

        .select-h36 {
          /deep/ .ivu-select-selection {
            height: 32px !important;
            width: 180px;
            flex-shrink: 0;
          }

          /deep/ .ivu-select-placeholder {
            height: 32px !important;
            line-height: 32px !important;
          }

          /deep/ .ivu-select-selected-value {
            height: 32px !important;
            line-height: 32px !important;
          }
        }

        .make-title {
          opacity: 0.6;
          font-size: 16px;
          width: 80px;
          flex: inherit !important;
          // display: inline-block;
        }

        .make-label {
          height: 20px;
        }

        .text_01 {
          font-size: 16px;
          // display: inline-block;
          flex: 1;
          height: 30px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }

  .pictureiFooter {
    display: flex;
    align-items: center;
    padding: 10px 20px 0;

    span {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #405680;
    }

    .pagePallion {
      margin-left: auto;
    }
  }
}

.default-box {
  width: 250px;
  // height: 290px;
  position: relative;
  left: 50%;
  top: 50%;
  margin: -125px 0 0 -130px;

  p {
    margin-top: 10px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    color: #333333;
  }

  .default-img {
    width: 250px;
    height: 260px;
  }
}

.text_18 {
  font-size: 18px !important;
}
</style>